<template>
    <div class="container containerStudent">
        <div class="header mdle">
            <div class="from-name">
                表单名称：
                <span>{{ formInfo.title }}</span>
            </div>
            <div class="page-view mdle">
                浏览量：
                <span>{{ formInfo.view_count }}</span>
            </div>
            <div class="submit-num mdle">
                提交量：
                <span>{{ formInfo.submit_count }}</span>
            </div>
            <div class="school-namecmdle">
                学校名称：
                <el-select
                    v-model="schoolName"
                    placeholder="请选择"
                    @change="getTableData(1)"
                    clearable
                    size="small"
                >
                    <el-option
                        v-for="item in optionSchool"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                </el-select>
            </div>
            <!-- <a
                :href="exportLink"
                target="_blank"
            >
                <el-button
                    round
                    type="primary"
                    size="small">导出</el-button>
            </a> -->
            <el-button
                round
                class="mdle"
                type="primary"
                size="small"
                @click="exportLink"
            >导出</el-button>
        </div>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            style="width: 100%;"
            border
            class="tableInfo"
        >
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="80"
            />
            <el-table-column
                label="填写人"
                align="center"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div>
                        { {{ scope.row.user.user_name }} } - { {{ scope.row.user.school }} }
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="填写时间"
                align="center"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="填写详情"
                align="center"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <span
                        class="checkInfo"
                        @click="fnGoForm(scope.row)"
                        handlance
                    >查看</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                v-for="(item,index) in formInfo.form_config"
                :key="index"
                :label="item.title"
            >
                <template slot-scope="scope">
                    <div v-if="item.type == 3">
                        <p
                            v-for="(itm,idx) in scope.row.form_data_value[item.name]"
                            :key="idx">
                            {{ `${idx+1}、` + itm }}
                        </p>
                    </div>
                    <div v-else-if="item.type == 5 || item.type == 8">
                        <a
                            v-if="scope.row.form_data_value[item.name].length!=0"
                            href="javascript:;"
                            style="color: #409EFF"
                            @click="fnShowPreview(scope.row.form_data_value[item.name])">查看</a>
                        <a
                            href="javascript:;"
                            v-else>--</a>
                    </div>
                    <div v-else-if="item.type == 7">
                        {{ scope.row.form_data_value[item.name] == "" ? '--' : scope.row.form_data_value[item.name] * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </div>
                    <div v-else>
                        {{ scope.row.form_data_value[item.name] == "" ? '--' : scope.row.form_data_value[item.name] }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="allSubmit">共{{ allSubmit }}个提交</div>
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    components: {
        imgPreview
    },
    data () {
        return{
            exportSchoolId:'',
            formInfo:{},
            optionSchool: [{
                value: '',
                label: '全部'
            }],
            value: '',
            form_no:'',
            submitInfo:[],
            schoolName: '',
            tableData: [],
            allSubmit: '',
            questionList: [],
        };
    },
    created(){
        this.getTableData();
        this.getSchoolList();
    },
    mounted () {
        if (window.history && window.history.pushState && this.prevPage !== '') {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed(){
        if (this.prevPage !== '') {
            window.removeEventListener('popstate', this.goBack, false);
        }
    },
    methods:{
        /**
         * 监听返回事件
         */
        goBack () {
            if (this.prevPage !== '') {
                this.$router.replace({
                    name: 'studentForm',
                });
            }
        },
        renderHeader(h, { column, $index }) {
            return h(
                'span',
                {
                    props: {
                        content: (function() {
                            let label = column.label;

                        })(),
                        placement: 'top'
                    },
                },
                [h('span')]
            );
        },
        getTableData(page){
            let parameter = this.$route.query;

            this.form_no = parameter.form_no;
            this.$post('/student/custom_form_data%5Cget_list', {
                form_no: this.form_no,
                user_school_id: this.schoolName,
            }, resp => {
                if (resp.code == 1) {
                    this.formInfo = resp.data.custom_form;
                    this.tableData = resp.data.list;
                    // 当前展示的提交数量
                    this.allSubmit = this.formInfo.submit_count;
                }
            });
        },
        fnShowPreview(images) {
            let imgList = [];

            if (typeof(images) == 'object') {
                this.$refs.preview.show(images);
            } else if (typeof(images) == 'string') {
                imgList.push(images);
                this.$refs.preview.show(imgList);
            }
        },
        // 跳转到预览表单页面
        fnGoForm(row){
            this.$router.replace({
                name: 'formPreview',
                query: {
                    id: row.id,
                    type: '2',
                    form_no: this.form_no
                }
            });
        },
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        // 导出数据
        exportLink () {
            if(this.tableData != ''){
                this.optionSchool.map((item)=>{
                    if(item.label == this.tableData[0].user.school){
                        this.exportSchoolId = item.value;
                    }
                });
            }

            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${base}/student/custom_form_data%5Cexport_list?form_no=${this.form_no}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * 获取学校列表
         */
        getSchoolList () {
            let parameter = this.$route.query;

            this.form_no = parameter.form_no;
            this.$post('/student/custom_form_data%5Cget_user_school_list', {
                form_no: this.form_no,
            }, resp => {
                if (resp.code == 1) {
                    let list = [];

                    resp.data.list.map(item => {
                        list.push({
                            value: item.id,
                            label: item.name
                        });
                    });

                    this.optionSchool = this.optionSchool.concat(list);
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 15px;
        position: relative;
        width: 100%;
        .header {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
        }
    }
    .tableInfo{
        margin-top: 15px;
    }
    .checkInfo{
        color: #409EFF;
        cursor: pointer;
    }
    .allSubmit{
        width: 100%;
        text-align: right;
        margin-top: 15px;
        font-size: 16px;
    }
    .mdle{
        margin-right: 30px;
    }
</style>
